<template>
	<view class="child-device-status-page">
		<!-- <view class="base-status">
			<view class="base-label">管控状态</view>
			<view class="base-value-style green">{{queryStatus(childPhoneStatusInfo.deviceStatus, control)}}</view>
		</view> -->
		<view class="base-status">
			<view class="base-label">连接状态</view>
			<view class="base-value-style">{{queryStatus(childPhoneStatusInfo.whetherOnline, isOnline)}}</view>
		</view>
		<view class="base-status">
			<view class="base-label">屏幕状态</view>
			<view class="base-value-style">{{queryStatus(childPhoneStatusInfo.screenStatus, screenStatus)}}</view>
		</view>
		<view class="base-status">
			<view class="base-label">剩余电量</view>
			<view class="base-value-style green">{{ quantity(childPhoneStatusInfo.electricQuantity) }}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	// deviceStatus: "-", // 管控状态 0:无管控信号 1:管控 2:脱管
	// electricQuantity:"-", // 电池电量0-100 -1:未知
	// screenStatus:"-", //屏幕状态 0:屏幕关闭 1:屏幕开启 2:未知
	// studentId:"",
	// whetherOnline:"-", // 	是否在线 0:离线 1:在线 2:未知
	
	defineProps({
		childPhoneStatusInfo: {
			type: Object,
			required: true
		}
	})
	
	// 管控状态
	const control = [
		{
			label: '-',
			value: '-'
		},
		{
			label: '无管控信号',
			value: '0'
		},
		{
			label: '管控',
			value: '1'
		},
		{
			label: '脱管',
			value: '2'
		}
	]
	
	// 屏幕状态
	const screenStatus  = [
		{
			label:'-',
			value: '-'
		},
		{
			label:'屏幕关闭',
			value: '0'
		},
		{
			label:'屏幕开启',
			value: '1'
		},
		{
			label:'未知',
			value: '2'
		}
	] 
	
	// 是否在线
	const isOnline = [
		{
			label:'-',
			value: '-'
		},
		{
			label:'离线',
			value: '0'
		},
		{
			label:'在线',
			value: '1'
		},
		{
			label:'未知',
			value: '2'
		},
	]
	const queryStatus = (v, dic) => {	
		const { label = '-' } = dic?.find((item:any) => item.value === v.toString())
		return label;
	}
	
	// 电量
	const quantity = (v) => {
		if(isNaN(Number(v))){
			return "-"
		}
		if(Number.isInteger(v)){
			return  Math.floor(Number(v) / 100  * 100) + '%';
		} else {
			return Math.ceil(v / 100 * 100) + '%'
		}
	}
	
	
</script>

<style lang="scss" scoped>
	.child-device-status-page{
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 26upx 17upx;
		background-color: #fefeff;
		margin-bottom: 20upx;
		.base-status{
			display: flex;
			flex-direction: column;
		    justify-content: space-between;
		    align-items: center;
		    height: 100upx;;
			.base-label{
				font-weight: 400;
				font-size: 30upx;
				color: #999999;
			}
			.base-value-style{
				// font-weight: 800;
				font-size: 32upx;
				color: #081A2A;
			} 
			.green{
				color: $blue-theme;
			}
		}
		
		
	}
</style>